<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <meta name="referrer" content="no-referrer" />
    <!-- icon图标 -->
    <link rel="icon" href="./static/image/kkb.png">
    <!-- swiper插件 -->
    <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css">
    <script src="./static/swiper/swiper-bundle.min.js"></script>
    <!-- 全局样式 -->
    <link rel="stylesheet" href="./static/style.css">
    <!-- 弹性布局 -->
    <script src="./static/flexable.js"></script>
    <!-- Vue3.0 -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!--    视频翻页-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="v in videos" @click="doubleClick($event,v.id)">
<!--                播放按钮-->
                <img src="./static/image/play.png" v-if="!v.playing" class="play-btn" alt="">
<!--                头像-->
                <img :src="v.author" class="author" alt="">
<!--                获得点赞的数量-->
                <div class="reward-num">
                    <img src="./static/image/active.png" alt="">
                    <p>{{v.likenum}}</p>
                </div>
<!--                点赞出现的心-->
                <div class="hearts">
                    <img src="./static/image/active.png" v-for="h in hearts" :key="h.id" :style="{left:h.x+'px',top:h.y+'px'}" alt="">
                </div>
<!--                视频-->
                <video :id="'v-'+v.id" x5-video-player-fullscreen="true" webkit-playsinline="true"
                       x-webkit-airplay="true" playsinline="true" x5-playsinline :src="v.videoUrl" :poster="v.poster"
                ></video>
            </div>
        </div>
    </div>
<!--    底部导航栏-->
    <footer>
        <ul>
            <li>首页</li>
            <li>朋友</li>
            <li><img src="./static/image/kkb.png" alt=""></li>
            <li>消息</li>
            <li>我</li>
        </ul>
    </footer>
</div>
<script src="./static/data.js"></script>
<script>
    //屏幕左边的位置
    const screenW = document.querySelector(".swiper-container").offsetLeft;
    const app = {
        data(){
            return {
                videos:VIDEOS,
                lastIndex:0,
                currentIndex:0,
                timer:null,
                db_start:0,
                hearts:[]
            }
        },
        mounted(){
            let _self = this;
            //1.swiper初始化
            var mySwiper = new Swiper('.swiper-container',{
                direction:"vertical",
                on:{//------ON
                    slideChangeTransitionEnd:function(){
                        console.log("初始化时--/_self.lastIndex:"+_self.lastIndex," / _self.currentIndex:"+_self.currentIndex," / this.activeIndex:"+this.activeIndex);
                        _self.lastIndex = _self.currentIndex;
                        _self.currentIndex = this.activeIndex;
                        _self.switchVideo();
                    }
                }
            })
        },
        methods:{
            //点击播放
            playClick(id){
                this.videos.forEach(v => {
                    //document.queryselector("#v-"+id).play()
                    //单击暂停播放
                    if (v.playing){
                        v.playing = false;
                        document.querySelector('#v-'+id).pause();
                    }else {
                        v.playing = true;
                        document.querySelector('#v-'+id).play();
                    }
                })
            },
            //判断当前视频
            switchVideo(){
                console.log("判断当前视频-this.lastIndex:"+this.lastIndex," -- this.currentIndex:"+this.currentIndex);
                document.querySelector('#v-'+this.lastIndex).pause();
                document.querySelector('#v-'+this.currentIndex).play();
                this.videos.forEach(v=>{
                    if (v.id===this.lastIndex){
                        v.playing = false
                    }else if (v.id === this.currentIndex){
                        v.playing = true;
                    }
                })
            },
            //小心❤
            likes(e,id){
                let x = e.clientX - screenW - 40;//40 是图片的一半宽度，鼠标效果才能在图片中心点击
                let y = e.clientY - 40;//同样减去 高度
                this.hearts.push({
                    x,y,id:new Date().getTime()
                });
                if (this.hearts.length > 7){//动画效果的 控制--小心心多了容易卡，少了 体验不好
                    this.hearts.shift();
                }
                this.videos.forEach(v=>{
                    if (v.id=== id){
                        v.likenum++
                    }
                })
            },
            //双击点赞
            doubleClick(e,id){
                //判断单击或者是双击
                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    clearTimeout(this.timer);
                    this.playClick(id);//300毫秒外是——————————————————————————————————————————单击
                    this.db_start = 0;
                },300);
                if (this.db_start === 0){//重新判断时间
                    this.db_start = new Date().getTime();//获取最新双击时间
                    console.log(this.db_start)
                }else {
                    let now = new Date().getTime();//获取最新单击时间
                    let del = now - this.db_start;//得出时间差
                    console.log(del);
                    if (del <= 300){//在300毫秒内是————————————————————————————————————————————双击
                        //双击
                        clearTimeout(this.timer);
                        this.likes(e,id);
                    }
                    this.db_start = 0;//重新置零
                }
            }
        }
    }

    Vue.createApp(app).mount("#app");//声明式渲染
</script>
</body>
</html>